<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            var ul=document.querySelector("ul");//DOM对象
            console.log(ul.parentNode);//获取父元素的DOM对象
            console.log(ul.previousElementSibling);//获取同级别的前一个元素
            console.log(ul.nextElementSibling);//获取同级别的后一个元素
            console.log(ul.firstElementChild);//获取的第一个子元素
            console.log(ul.lastElementChild);//获取最后一个子元素
        }
    </script>
</head>
<body>
    <input type="button" value="根据已知节点查找其他节点" onclick="f1()">
    <div>哈哈哈</div>
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
        <li>li05</li>
    </ul>
    <p>嘻嘻嘻</p>

</body>
</html>